<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>file</title>
</head>
<body>
    <input type="file" id="file">
    <br>
    <button id="download">下载</button>
    <script>
        // 文件流下载
        const btn = document.querySelector('#download')
        btn.addEventListener('click', function() {
            fetch('http://localhost:3000/download', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    fileName: '1',
                    suffix: 'png'
                })
            })
            .then(res => res.arrayBuffer())   // 这里接收的类型是 Buffer 二进制
            .then(res => {
                //转成 blob
                let blob = new Blob([res], {type: 'image/png'})
                // 创建一个下载链接
                let url = URL.createObjectURL(blob)
                // 创建一个下载的a标签
                let a = document.createElement('a')
                a.href = url
                a.download = '1.png'
                a.click()
            })
        })



        // 获取文件对象
        // 文件上传需要起一个服务，本地服务
        // var file = document.getElementById('file').files[0];
        const fileDoc = document.querySelector('#file')
        fileDoc.addEventListener('change', function(e) {
            // console.log(e.target.files[0])  // file对象
            let file = e.target.files[0]         // file对象底层继承blob, blob有slice方法，文件切割需要用 slice 方法
            let name = file.name
            let fileName = name.split('.')[0]
            let suffix = name.split('.')[1]
            let chunks = chunkFun(file)
            uploadFile(chunks, fileName, suffix)
        })

        // 切片函数
        const chunkFun = (file, chunkSize = 1024 * 1024 * 10) => {  // 默认10M一片
            let chunks = []

            /*
                for循环切割文件
                for(let i=0; i< file.size; i+=chunkSize) {
                    chunks.push(file.slice(i, i+chunkSize))
                }
            */

            let start = 0
            while(start < file.size) {
                chunks.push(file.slice(start, start + chunkSize))
                start += chunkSize        // 每次起始是上一次的结束 0-10 10-20 20-30 ...
            }

            return chunks;
        }

        const uploadFile = (chunks, fileName, suffix) => {
            // 文件上传，批量
            let list = []
            for(let i=0; i< chunks.length; i++) {
                let formData = new FormData()
                formData.append('name', 'video')
                formData.append('index', i)         // 标识，后的可以通过这个标识来判断是哪一片，并且要按顺序合并
                formData.append('total', chunks.length)  // 总片数
                formData.append('file', chunks[i])     // 这个一定要放到最后，自定义信息放前面，不然后台一旦读到file，就停止读取
                list.push(fetch('http://localhost:3000/upload', {
                    method: 'POST',
                    body: formData
                }))
            }
            
            // 并发上传
            Promise.all(list).then(res => {
                // 成功后提醒后台合并
                fetch('http://localhost:3000/merge', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        fileName: fileName,
                        suffix: suffix
                    })
                }).then(res => {
                    console.log(res)
                })
            })
        }
    </script>
</body>
</html>